* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { width: 100%; height: 100vh; background-image: url("../img/background.png"); background-repeat: no-repeat; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.login { margin-top: 14vw; text-align: center; }

.login .logo { width: 29.46667vw; height: 25.86667vw; margin: 0 auto; }

.login .logo img { width: 100%; height: 100%; }

.login .input-box { margin-top: 18.66667vw; }

.login .input-box div { margin-bottom: 6.66667vw; }

.login .input-box div input { width: 76.8vw; height: 10.13333vw; border-radius: 5.06667vw; background-color: rgba(255, 255, 255, 0.5); padding: 5.33333vw; border: 0; outline: none; font-size: 3.46667vw; }

.login .btn-box { margin-top: 3.6vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.login .btn-box button { width: 32.66667vw; height: 10.13333vw; border-radius: 5.06667vw; background-color: rgba(255, 255, 255, 0.8); border: 0; font-size: 3.73333vw; color: #0075c1; font-weight: bold; outline: none; }

.appointment { margin-top: 22.66667vw; width: 78.66667vw; height: 111.86667vw; display: none; background-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: 1px 3px 20px 1px #babfc1; box-shadow: 1px 3px 20px 1px #babfc1; border-radius: 10px; padding: 6.66667vw; }

.appointment .top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.appointment .top select { font-size: 4vw; outline: none; }

.appointment .top div { font-size: 3.33333vw; color: #01aff3; }

.appointment .content { margin-top: 5.33333vw; }

.appointment .content .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 12vw; padding-right: 9.33333vw; color: #0075c1; }

.appointment .content .list { height: 66.66667vw; overflow: auto; }

.appointment .content .list ul { list-style: none; }

.appointment .content .list ul li { margin-top: 13.33333vw; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; font-size: 3.46667vw; }

.appointment .content .list ul li .reserved { color: green; }

.appointment span { font-size: 3.46667vw; }

.appointment .login-back { margin-top: 4vw; color: #0075c1; }

.myBooking { width: 78.66667vw; margin-top: 20vw; display: none; }

.myBooking .booking-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.myBooking .booking-top h4 { color: #0075c1; }

.myBooking .booking-top .booking-back { color: #0075c1; font-size: 4vw; }

.myBooking .record { overflow: auto; height: 90%; }

.myBooking .record .recordBox { width: 78.66667vw; height: 50.66667vw; margin-top: 13.33333vw; background-color: rgba(255, 255, 255, 0.5); border-radius: 1.33333vw; -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.3); text-align: center; padding: 2.66667vw; }

.myBooking .record .recordBox p { margin-top: 10.13333vw; }

.invitation { margin-top: 22.66667vw; width: 78.66667vw; height: 111.86667vw; display: none; background-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: 1px 3px 20px 1px #babfc1; box-shadow: 1px 3px 20px 1px #babfc1; border-radius: 10px; padding: 6.66667vw; }

.invitation div { text-align: center; }

.invitation .invitation-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.invitation .invitation-top div { font-size: 4vw; font-weight: bold; color: #0075c1; }

.invitation p { font-size: 3.46667vw; text-indent: 2em; margin-top: 5.33333vw; }

.invitation .QR { width: 35.33333vw; height: 35.33333vw; border: solid 4px #434242; margin: 0 auto; margin-top: 8vw; }

.invitation .QR img { width: 100%; height: 100%; }

.invitation button { width: 24.93333vw; height: 7.6vw; background-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.39); box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.39); border-radius: 3.86667vw; margin-top: 5.33333vw; margin-bottom: 2.66667vw; color: #0075c1; border: 0; outline: none; }
